<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for</title>
        <script type="text/javascript" src="../assets/js/vue.js"></script>
	</head>
	<body>
        <h1>v-for</h1>
        <hr >
        <!--
            1.循环输出数据
            2.排序输出数据
        -->
        <div id="app">
            <ul>
                <li v-for="item in sortItems">
                    {{item}}
                </li>
            </ul>
            <hr >
            <ul>
                <li v-for="student in sortStu">{{student.name}}-{{student.age}}</li>
            </ul>
        </div>
        
        <script type="text/javascript">
            
            var app = new Vue({
                el:'#app',
                data:{
                    items:[11,2,3,45,8],
                    studens:[
                        {name:'老大',age:32},
                        {name:'老二',age:22},
                        {name:'老三',age:21},
                        {name:'老四',age:16}
                    ]
                },
                computed:{
                    sortItems:function(){
                        return this.items.sort(sortNum);
                    },
                    sortStu:function(){
                        return sortByKey(this.studens,'age');
                    }
                }
            });
            
            function sortNum(a,b){
                return a-b;
            };
            
            //数组对象方法排序:
            function sortByKey(array,key){
                return array.sort(function(a,b){
                  var x=a[key];
                  var y=b[key];
                  return ((x<y)?-1:((x>y)?1:0));
               });
            }
            
        </script>
	</body>
</html>
